<template>
  <div class="minWidth headerWrapper ">
    <div class="qureywrapper " >
      <ul>
        <li @click.stop="do_getSearchList" v-text='queryTarg2'> </li>
        <li v-for="(item,index) in navSearchList" :key='index' v-text='item' v-show='getSearchList' @click.stop='def_getTarget(item)'>

        </li>

      </ul>
      <span class="input"><input type="text" placeholder="请输入你要搜索的内容" v-model="queryText2"></span>
      <span class="icon f-zhong" @click="do_query"><img src="../../assets/Home/sousuo.png" alt="" ></span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "cm_doSelect",
      data(){
        return{
          getSearchList: false,
          queryText2:this.queryText,
          queryTarg2:this.queryTarg,
        }
      },
      props:{
        navSearchList:Array,
        queryText:{
          type:String,
          default:''
        },
        queryTarg:{
          type:String,
          default:''
        }
      },
      created(){
          if(this.navSearchList[0]){
            if(this.queryTarg2==''){
              this.queryTarg2=this.navSearchList[0]
            }
          }
      },
      methods:{
        do_getSearchList() {
          let me = this;
          me.getSearchList = !me.getSearchList
        },
        def_getTarget(item) {
          let me = this;
          me.queryTarg2 = item;
          me.getSearchList = !me.getSearchList
        },
        do_query(){
          let obj={}
          obj.queryTarg=this.queryTarg2
          obj.queryText=this.queryText2
          this.$emit("do_query",obj)
        }
    }

    }
</script>

<style scoped>
  .headerWrapper{
    margin-top: 10px;
  }
  .qureywrapper .icon{
    flex: 0 0 70px;
    background-color: #418DFD;
    cursor: pointer;
  }
  .qureywrapper .icon img{
    width: 25px;
    height: 25px;
  }
  .input input{
    flex: 1;
    border: none;
    outline: none;
  }


  .headerWrapper .qureywrapper{
    flex:1;
    height:40px;
    line-height: 40px;
    margin-top:20px;
    position: relative;
    background-color: white;
  }
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .headerWrapper .qureywrapper *{
    float:left
  }
  .headerWrapper .qureywrapper ul{
    width: 120px;
    height: 40px;
    line-height: 40px;
    position: relative;
    z-index: 99;
  }
  .headerWrapper .qureywrapper ul li{
    border: 1px solid gainsboro;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-top: none;
    background-color: white;
  }
  .headerWrapper .qureywrapper ul li:first-child, .headerWrapper .qureywrapper ul li:first-child:hover{
    border: none;
    left:0;
    background: url('../../assets/Home/xiala.png') 91%  no-repeat ;
    background-size: 11px 8px;
    position: relative;
    z-index: 99;
    color: black;
  }
  .headerWrapper .qureywrapper ul li:nth-of-type(2){
    border-top: 1px solid gainsboro;
  }
  .headerWrapper .qureywrapper ul li:first-child:after{
    content: '';
    position: absolute;
    height: 26px;
    width: 1px;
    background-color: #b7b7b7;
    right: 0;
    margin-top: 7px;
  }
  .headerWrapper .qureywrapper ul li:hover{
    background: #418EFD;
    color: white;
  }

  .headerWrapper .qureywrapper .input{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px;
    right: 50px;
  }
  .headerWrapper .qureywrapper .input input{
    padding-left: 11px;
    width: 100%;
    height: 40px;
    display: inline-block;
    border: none;
    outline: none
  }
  .icon{
    width: 80px;
    position: absolute;
    right: 0;
    height:40px;
    background: #418EFD;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  .icon img{
    width: 26px;
    height: 26px;
  }
</style>
